@charset "utf-8";
@import 'layout.less';

/**************** LOGIN STYLES ***************/
div.header-bar{
    width: 428px;
    padding: 10px 0px;
    .box-sizing-border-box();

    h2{
        margin: 0px;
    }
    div.content-bar{
        padding-right: 20px;
        margin-top: 10px;
        a{
            color: #fff;
            &:hover{
                color: #ccc;
                text-decoration: none;
            }
        }
    }
}

div#container-login{
    width: 428px;
    margin: 0 auto;
    border: 1px solid #dbdce4;
    border-top: none;
    background-color: #fff;
    margin-bottom: 10px;
    .box-shadow(0px, 1px, 2px, rgba(0,0,0,.2));
    .box-sizing-border-box();
}

div.msg-user{
    text-align: center;
    padding: 10px 0px;
    border-left: none;
    border-right: none;
}

@color-border: #cdced3;
@form-color-font: #7b7b7b;
@form-font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
div.login-form{
    font-size: 14px !important;
    form{ margin: 0px; }

    div.input-controls{
        border-top: 1px solid @color-border;
        border-bottom: 1px solid @color-border;
        padding: 20px;

        div.alert{margin-bottom: 0px; text-align: center;}
    }

    div.button-controls{
        padding: 16px 20px;
        background-color: #f5f5f5;
        border-top: 1px solid #fff;
        color: @form-color-font;
        font-family: @form-font-family;

        div.control-group{
            label{padding-top: 5px;}
            margin: 0px;
        }
    }

    form.form-horizontal {
        label.control-label{
            width: 165px;
            text-align: left;
            padding-top: 10px;
            color: @form-color-font;
            font-family: @form-font-family;
        }
        div.controls{
            margin-left: 0px;
            input{
                width: 205px;
                padding: 9px 6px;
                border: 1px solid #c8c9ce;
                float: right;
                color: @form-color-font;
                font-family: @form-font-family;
                .border-radius(0px);
            }
        }
        button, input[type="submit"]{
            border: 1px solid #2355ac;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 13px !important;
            color: #fff;
            .border-radius(0px);

            background: #4f95dc; /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top, #4f95dc 0%, #2e61b8 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f95dc), color-stop(100%,#2e61b8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #4f95dc 0%,#2e61b8 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #4f95dc 0%,#2e61b8 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #4f95dc 0%,#2e61b8 100%); /* IE10+ */
            background: linear-gradient(top, #4f95dc 0%,#2e61b8 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f95dc', endColorstr='#2e61b8',GradientType=0 ); /* IE6-8 */
        }
    }
}

div.msg-contact{
    border-top: 1px solid @color-border;
    text-align: center;
    padding: 15px 0px;
    font-size: 13px;
    color: #7b7b7b;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
}

/* Large desktop */
@media (min-width: 1200px) {}

@media (min-width: 1024px){
    div.button-controls{
        label input[type=checkbox]{margin-top: 3px;}
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
    div.button-controls{
        label input[type=checkbox]{margin-top: 3px;}
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    div.button-controls{
        text-align: center;
        label input[type=checkbox]{
            float: none;
            margin-top: -2.5px;
        }
        button, input[type=submit] {float: none;}
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    div.header-bar{
        text-align: center;
        width: 100%;
        h2{float: none; padding: 0;}
        div.content-bar{float: none; padding: 0;}
    }
    div#container-login{
        width: 100%;
        form.form-horizontal {
            label.control-label{width: 100%;}
            div.controls{
                input{
                    width: 95%;
                    float: none;
                }
            }
            button, input[type="submit"] {float: none;}
        }
    }
}

@media (max-width: 320px) {}